<template>
    <div class="myContent">
        <div class="block-ul">
            <ul>
                <li v-for="item in items">
                    <a class="right">{{item.info}}</a>
                    <span class="leftBlock">芸券用户   {{item.usrName | hideName}}</span>
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
    export default {
        props:["items"],
        beforeRouteLeave(to, from, next){
            document.querySelector(".block-ul").removeEventListener("webkitTransitionEnd",me.transformEnd);
            clearTimeout(timer);
            next();
        },
        updated(){
            let me = this;
            //注册滚动
            var liH      = getEle("all",".block-ul li")[0].offsetHeight,
                divH     = getEle("",".myContent").offsetHeight,
                liLength = getEle("all",".block-ul li").length,
                index    = 0;
                init();
            function init() {
                var ulStr = getEle("",".block-ul ul").innerHTML;
                var ul = document.createElement('ul');
                ul.innerHTML = ulStr;
                if (liLength>=7) {
                    getEle("",".block-ul").appendChild(ul);
                    scroll();
                }
                
                // if(liH*liLength > divH){
                //     scroll();
                // }
            }
            function scroll() {
                if(!getEle("",".block-ul")){
                    return
                }
                index++
                getEle("",".block-ul").style.transform = 'translate3d(0px, '+liH*index*-1+'px, 0px)'
                getEle("",".block-ul").style.transitionDuration = '0.5s'
                getEle("",".block-ul").addEventListener("webkitTransitionEnd",function(){
                    this.style.transitionDuration = '0s'
                    if(index == 10){
                        index = 0;
                        document.querySelector(".block-ul").style.transform = 'translate3d(0px, 0px, 0px)';
                    }
                },false);
                setTimeout(scroll,2000);

            }
            function getEle(type,el) {
                if(type == 'all'){
                    return document.querySelectorAll(el);
                }else{
                    return document.querySelector(el);
                }
            }
        }
    }
</script>
<style>
    .myContent{height: 20rem;overflow: hidden;width:100%;}
</style>